<template>
  <Dialog
    title="新增用户"
    :confirm="handleSubmit"
    @closed="handleDialogClosed(addUpdateFormRef)"
    @open="handleOpen"
  >
    <el-form
      :model="addUpdateForm"
      :rules="addUpdateRules"
      ref="addUpdateFormRef"
      label-width="70px"
    >
      <el-form-item
        label="用户名"
        prop="username"
        :disabled="Boolean(props.currId)"
      >
        <el-input
          v-model="addUpdateForm.username"
        />
      </el-form-item>
      <el-form-item
        label="密码"
        prop="password"
        v-if="!Boolean(props.currId)"
      >
        <el-input
          v-model="addUpdateForm.password"
          type="password"
        />
      </el-form-item>
      <el-form-item
        label="邮箱"
        prop="email"
      >
        <el-input v-model="addUpdateForm.email" />
      </el-form-item>
      <el-form-item
        label="手机号"
        prop="mobile"
      >
        <el-input v-model="addUpdateForm.mobile" />
      </el-form-item>
    </el-form>
  </Dialog>
</template>

<script lang='ts' setup>
import Dialog from '@/components/Dialog.vue'
import { ElMessage, FormInstance, FormRules } from 'element-plus'
import { ref, reactive } from 'vue'
import { reqAddUser, reqUpdateUser } from '@/api/user'
const addUpdateFormRef = ref<FormInstance>()
const addUpdateForm = reactive({
  username: '',
  password: '',
  email: '',
  mobile: ''
})
const addUpdateRules = reactive<FormRules>({
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, max: 18, message: '长度在 6 到 18 个字符', trigger: 'blur' }
  ]
})

const props = defineProps({
  currId: {
    type: [String, Number],
    default: ''
  },
  currRow: {
    type: Object,
    default: () => {}
  }
})

interface EmitsType {
  (e: 'success'): void
}

const emit = defineEmits<EmitsType>()

const handleOpen = () => {
  Object.assign(addUpdateForm, props.currRow)
}
const handleDialogClosed = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}
const handleSubmit = async () => {
  if (!addUpdateFormRef.value) return
  await addUpdateFormRef.value.validate(async (valid, fields) => {
    if (valid) {
      if (props.currId) {
        try {
          await reqUpdateUser(props.currId, addUpdateForm)
          ElMessage.success('更新成功')
          handleDialogClosed(addUpdateFormRef.value)
          emit('success')
        } catch (err) {
          console.log('reqUpdateUser', err)
        }
      } else {
        try {
          await reqAddUser(addUpdateForm)
          ElMessage.success('创建成功')
          handleDialogClosed(addUpdateFormRef.value)
          emit('success')
        } catch (err) {
          console.log('reqAddUser', err)
        }
      }
    } else {
      console.log('error submit!', fields)
    }
  })
}
</script>
<style lang='scss' scoped>
</style>
